<template>

	<router-view v-slot="{ Component }">
		<transition>
			<keep-alive include="Home,Category" exclude="shopCart">
				<component :is="Component" />
			</keep-alive>
		</transition>
	</router-view>
	<div id="nav">
		<router-link class="tab-bar-item" to="/">
			<div class="icon">
				<i class="iconfont icon-shouye"></i>
			</div>
			<div>
				首页
			</div>
		</router-link>
		<router-link class="tab-bar-item" to="/category">
			<div class="icon">
				<i class="iconfont icon-fenlei"></i>
			</div>
			<div>
				分类
			</div></router-link>
		<router-link class="tab-bar-item" to="/shopcart">
			<div class="icon">
				<van-badge :content="$store.state.cartCount" max="9">
					<i class="iconfont icon-gouwuchezhengpin"></i>
				</van-badge>
			</div>
			<div>购物车</div>
		</router-link>
		<router-link class="tab-bar-item" to="/profile">
			<div class="icon">
				<i class="iconfont icon-yonghu"></i>
			</div><div>个人中心</div>
		</router-link>
	</div>
</template>

<style>
@import "./assets/css/iconfont.css";
@import "assets/css/base.css";
html {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
	
}
#nav {
 background-color: orange;
	display: flex; /* 弹性盒*/
	position: fixed; /* 固定位置*/
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: 0 -3px 1px rgba(100,100,100,0.5);
	text-decoration: none;
	
}
#nav a {
	font-weight: bold;
	color: #2c3e50;
}

#nav a.router-link-exact-active {
	color: #42b983;
}
.tab-bar-item{
flex: 1;/* 弹性盒*/
height: 50px;
	font-size: var(--font-size);
}
.tab-bar-item .icon{
	display: inline-block;/* 变为行内元素*/
	width:24px;
	height: 24px;
	margin-top: 3px;
}
#app{
width: 100%;
}
</style>
